<template>
  <div class="mine-box admin-order-box order-box">
    <mu-list>
      <mu-list-item>
        <mu-list-item-content>
          <mu-list-item-sub-title>
            <div class="fleft order-timebox order-title" @click="stimeshow=true">
              <div class="time-title">开始时间</div>
              <div class="time-des">{{choose.stime}}</div>
            </div>
            <div class="hour-box">
              <span class="hour">至</span>
            </div>

            <div class="fright order-timebox order-title" @click="etimeshow=true">
              <div class="time-title">结束时间</div>
              <div class="time-des">{{choose.etime}}</div>
            </div>
            <div class="_clear"></div>
          </mu-list-item-sub-title>
        </mu-list-item-content>
      </mu-list-item>
      <mu-divider></mu-divider>
      <h2 class="doubled">收益：{{parseFloat(sumSales).toFixed(2)}}</h2>
      <chart style="width:100%;" ref="chart1" :options="chartOptions" :auto-resize="true"></chart>

      <van-popup v-model="stimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="start.currentDate"
          type="date"
          :min-date="start.minDate"
          :max-date="start.maxDate"
          @confirm="startTimeChange"
          @cancel = "stimeshow=false"
        />
      </van-popup>
      <van-popup v-model="etimeshow" position="bottom" class="bottom-picker">
        <van-datetime-picker
          v-model="end.currentDate"
          type="date"
          :min-date="end.minDate"
          :max-date="end.maxDate"
          @confirm="endTimeChange"
          @cancel = "etimeshow=false"
        />
      </van-popup>
    </mu-list>
  </div>
</template>

<script>
  import Vue from "vue";
  import { Popup, Toast } from "vant";
  import { DatetimePicker } from "vant";
  import { Picker } from "vant";
  import "vant/lib/popup/style/index";
  import "vant/lib/datetime-picker/style/index";
  import { formatDate } from "@/utils/formart";
  Vue.use(DatetimePicker);
  Vue.use(Popup);
  Vue.use(Picker);
  import "vant/lib/toast/style/index";
  export default {
    data() {
      return {
        sumSales:0.00,
        a:new Date(),
        stimeshow: false,
        etimeshow: false,
        starttime: formatDate(new Date(new Date().getTime() - (24*60*60*1000)*7), "yyyy-MM-dd"),
        endtime: formatDate(new Date(), "yyyy-MM-dd"),
        start: {
          minHour: 10,
          maxHour: 20,

          maxDate: new Date(),
          currentDate: new Date(new Date().getTime() - (24*60*60*1000)*7),
        },

        end: {
          minHour: 10,
          maxHour: 20,
          minDdate: this.starttime,
          maxDate: new Date(),
          currentDate: new Date()
        },
        choose: {
          parkid: "",
          stime: formatDate(new Date(new Date().getTime() - (24*60*60*1000)*7), "yyyy-MM-dd"),
          etime: formatDate(new Date(), "yyyy-MM-dd"),

        },
        chartOptions:{
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['收益', '订单数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval:0,
              rotate:40,
              textStyle: {
                color: '#fff'
              }
            },
            data: []
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
          },
          series: [
            {
              name: '销售额',
              type: 'line',
              data: []
            },
            {
              name: '订单数',
              type: 'line',
              data: []
            },

          ]
        }
      };
    },
    components: {

    },
    watch: {

    },
    mounted() {
      if(this.$route.query.id){
        this.choose.parkid = this.$route.query.id;
        this.getOrderData();
      }
    },
    methods: {
      endTimeChange(e) {
        if(e<this.a){
          Toast('结束时间不能小于开始时间');
          return;
        }
        this.endtime = formatDate(e, "yyyy-MM-dd");
        this.choose.etime = formatDate(e, "yyyy-MM-dd");
        this.etimeshow = false;
        this.getOrderData();
      },
      startTimeChange(e) {
        this.a = e;
        this.starttime = formatDate(e, "yyyy-MM-dd");
        this.choose.stime = formatDate(e, "yyyy-MM-dd");
        this.stimeshow = false;
        this.getOrderData();
      },
      getOrderData() {
        this.$api
          .salesDetailByParams({
            parkid:this.choose.parkid,
            startTime:this.choose.stime,
            endTime:this.choose.etime
          })
          .then(res => {
              if(res.data.message.message='success'){
                this.chartOptions.xAxis.data = [...[]]
                this.chartOptions.series[0].data = [...[]];
                this.chartOptions.series[1].data = [...[]];
                res.data.data.forEach(element => {
                  this.chartOptions.xAxis.data.push(element.createTime);
                  //'有效订单数', '收益'
                  this.chartOptions.series[0].data.push(element.validCount);
                  this.chartOptions.series[1].data.push(element.sumSales);
                  this.sumSales=this.sumSales+element.sumSales*1;
                })
              }
          });
      },
    }


  };
</script>

<style>
  .doubled{
    text-align: center;
    color: #fff;
    margin-top: 10px;
  }
</style>
